<template>
  <el-container>
    <el-main>
      <div class="app-main" style="width: 900px">
            <div class="filter-container-top">
            <el-tabs
               class="deleteBorder"
               v-model="statustop"
           >     
             <el-tab-pane label="证据列表"   name="证据列表" >
                  <span slot="label">
                 证据列表
                </span>
              </el-tab-pane>
                  <el-tab-pane label="案件详情"  name="案件详情" >
                  <span slot="label">
                 案件详情
             
                </span>
              </el-tab-pane>
                </el-tabs>
          </div>
        <div class="filter-container">
         
          <div class="check_group">
            <el-tabs fill="＃F56C6C" 
            class="deleteBorder" 
             v-model="statusAll"
             @tab-click="handleFilter">
              <el-tab-pane label="已成功" value="已成功" name="已成功">
                <span slot="label">
                   已成功
                   <el-badge type="success" :value='count_success' ></el-badge>
                </span>
                </el-tab-pane> 

              <el-tab-pane label="全部" name="全部" value="全部">
                <span slot="label">
                  全部
                  <el-badge :value='total_num' type="info"> </el-badge
                ></span>
              </el-tab-pane>

              <el-tab-pane label="已失败" name="已失败" value="已失败">
              <span slot="label">
                已失败
                <el-badge :value='count_fail==null?0:count_fail' ></el-badge>
              </span>
                </el-tab-pane>
              <el-tab-pane value="进行中" name="进行中" >
                  <span slot="label">
                  进行中
                <el-badge type="warning" :value='count_progress' ></el-badge>
                </span>
              </el-tab-pane>
            
            </el-tabs>
            <el-tabs fill="＃F56C6C" 
               class="marktabs deleteBorder" 
              v-model="statusAll"
               @tab-click="handleFiltermark">
                <el-tab-pane value="书签" name="书签" >
                  <span slot="label">
                 书签
                <el-badge type="success" :value='count_mark' ></el-badge>
                </span>
              </el-tab-pane></el-tabs>
          </div>
          <div class="option">
            <el-button size="small" type="primary" @click="addData">
              添加证据
            </el-button>
              <el-button type='text' @click="handleFilter" class="el-icon-refresh"></el-button>
          </div>
        </div>
        <createDialog
          @cancel="cancels"
          :dialogFormVisibleT="dialogFormVisibleT"
          :modify="modify"
          :headers="headers"
           @changeList='changeList'
        ></createDialog>
        <div class="searchBox">
          <el-input
            v-model="listQuery.keyword"
            size="medium"
            @keyup.enter.native="handleFilter"
            placeholder="请输入证据标题进行搜索"
            class="filter-item" 
            prefix-icon="iconfont el-icon-search "
          />
          <!-- <i  class="el-icon-search"></i> -->
          <el-select
            size="small"
            filterable
            v-model="listQuery.sort_order"
            @change="handleFilter"
            placeholder="最新在前"
          >
            <el-option
              v-for="item in optiondate"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
        <div class="filter-list">
          <el-table
            ref="recordTable"
            :key="0"
            v-el-table-infinite-scroll="load"
            :show-header="false"
            stripe
            :data="list"
            :height="tableHeight"
          >
          <!-- @row-click="senddetail" -->
            <el-table-column>
          
              <template slot-scope="{ row,$index }">
                <el-row>
                  <el-col :span="3">
                   <div class="showimg">
                        <div v-show="row.evidence_status==='已失败'">
                          <div class="imgdata"><svg-icon icon-class="imagefail"></svg-icon></div>
                          <div style="width:80px;margin:auto"><span style="font-size:12px">图片爬取失败</span></div>
                         </div >
                    <div  v-show="row.evidence_status==='进行中'">
                          <div class="imgdata" > <svg-icon icon-class="imageloading"></svg-icon></div>
                          <div style="width:80px;margin:auto"><span style="font-size:12px">图片正在爬取</span></div>
                    </div >
                    <div  v-show="row.evidence_status==='已成功'">
                      <div class="imgdata" ><img :src="row.thumbnail_img" height="100" width="80" /></div>
                    </div>
                   </div>
                  </el-col>
                  <el-col :span="21">
                    <div class="msgdata">
                      <el-row>
                        <el-col :span="23">
                         <div>
                          <p class="title_p">
                          <router-link target="_blank" @click.native="senddetail(row)" :to="{ name: 'Detail'}">
                             <span style="font-size:16px;font-weight: bold;padding-right:5px;color:#222222">{{ row.title }}</span>
                         </router-link>
                          </p>
                        </div>
                        </el-col>
                        <el-col :span="1">
                             <el-button  v-show="row.evidence_status!=='已失败'" class="bookmark" size="small" type="text"    :for="'awesome'+$index" @click="row.mark?sendmark(row):deletemark(row)">
                               <!-- <el-button class="bookmark" size="small" type="text"    :for="'awesome'+$index" @click="sendmark(row)"> -->
                            <el-tooltip effect="dark"  content="点击标记" placement="top">
                               <svg-icon v-show="!row.mark" style="font-size:25px"  icon-class="labelgrey" @click="row.mark=!row.mark" ></svg-icon>
                            </el-tooltip>
                              <el-tooltip effect="dark"  content="取消标记" placement="top" >
                              <svg-icon v-show="row.mark" style="font-size:25px"  icon-class="labelblue"  @click="row.mark=!row.mark" ></svg-icon>
                             </el-tooltip>
                             </el-button>
                        </el-col>
                      </el-row>
                   
                   
                      <div class="line_creater">
                          <label style="padding-right:5px">由</label>
                          <span style="color: #666666;">{{ row.evidence_creater }}</span>
                          <label style="padding:0 5px">创建于</label>
                          <span style="color: #666666;margin-right:10px">{{ row.start_time | parseTime }}</span>
                          <el-tag
                        size="small"
                          :type="row.evidence_status | statusFilter" >
                          {{ row.evidence_status }}
                        </el-tag>
                      </div>
                         

                      <div class="line_link">
                        <div class="link" style="width: 70% ;margin:auto 0">
                              <!-- <label style="margin-right:15px" >网址:</label> -->
                         <el-tooltip
                            class="item"
                            effect="dark"
                            :content="row.url"
                            placement="top"
                          >
                            <el-link  :href="row.url" :underline="false"  target="_blank">{{
                              row.url
                            }}</el-link>
                          </el-tooltip>
                        </div>
                        <div style="padding-right: 30px;color:#000000">   
                           <!-- <div><el-checkbox></el-checkbox></div> -->
                          <div>更新于<span style="color:#000000">{{ row.update_time | formatTime}}</span></div>
                        </div>
                      </div>
                    </div>
                    </el-col>
                </el-row>
              </template>
            </el-table-column>
          </el-table>
          <el-alert
            v-if="isflag"
            title="正在努力加载中..."
            type="success"
            center
            :closable="false"
            show-icon
          />
          <!-- <el-alert
            v-if="isMore"
            title="没有更多啦！"
            type="warning"
            center
            show-icon
          /> -->
          <el-dialog append-to-body title="添加证据">
            <!-- :rules="rules"
            :model="temp" -->
            <el-form
              ref="dataForm"
              label-width="80px"
              label-position="left"
              style="width: 85%; margin-left: 30px">
              <el-form-item disabled="disabled" label="案件编号">
               <el-input size="small" />
              </el-form-item>
            </el-form>
          </el-dialog>
        </div>
      </div>
    </el-main>
    <el-aside :height="tableHeight" style="background: #fafafa">
      <rightAside></rightAside>
    </el-aside>
  </el-container>
</template>
<script>
import { fetchEvidence,createmark, fetchmark,delectmark} from "@/api/evidence";
import {formatTime,parseTime} from "@/utils/index";
import index from "@/components/BackgroundCanvas/index.vue";
import createDialog from "@/views/form/createDialog";
import rightAside from "@/views/form/rightAside";

const labelOptionsx = ["涉毒", "涉黄", "教育相关", "医疗相关"];
export default {
  name: "formindex",
  components: { index, createDialog,rightAside },
  filters: {
    statusFilter(status) {
      const statusMap = {
        已成功: "success",
        进行中: "info",
        已失败: "danger",
      };
      return statusMap[status];
    },
    typeFilter(type) {
      return calendarTypeKeyValue[type];
    },
   formatTime(t){
         let time=new Date(t).getTime().toString().substr(0,10)
         return formatTime(time,true)
    },
    parseTime(val){
     let valtime= val.toString().substr(0,10)
      return  parseTime(valtime)
    },
     //formatTime: formatTime,
  },
  data() {
    return {
      evidenceIds:[],
      value: null,
      inputVisible: false,
      inputValue: "",
      labelOptions: labelOptionsx,
      total_num: 0,
      count_fail:0,
      count_success:0,
      count_progress:0,
      count_mark:0,
      statusAll: "已成功",
      statustop:"证据列表",
      list: [],
      caseDetail: {
        id: null,
        case_number: null,
        case_name: "",
        case_examiner: [],
        case_creater: "",
        start_time: new Date(),
        label: [],
        case_status: "",
      },
      isMore: false,
      isflag: false,
      tableHeight: 100,
      typeValue: "button",
      listQuery: {
        sort_order:'-1',
        case_id: "",
        page: 1,
        page_size: 5,
        keyword: null,
        case_status:null,
      },
      markQuery:{
            case_id: null,
            evidence_id:null,
      },
      optiondate: [
        {
          value: "-1",
          label: "最新在前",
        },
        {
          value: "1",
          label: "最早在前",
        },
      ],
      modify: "",
      headers: "",
      dialogFormVisibleT: false,
    };
  },
  mounted() {
    this.$nextTick(() => {
      // 根据浏览器高度设置初始高度
      this.tableHeight =
        window.innerHeight - this.$refs.recordTable.$el.offsetTop - 70;
      // 监听浏览器高度变化，改变表格高度
      window.onresize = () => {
        this.tableHeight =
          window.innerHeight - this.$refs.recordTable.$el.offsetTop - 70;
      };
    });
  },
  created() {
     this.getCaseDetail();
       this.getList();  
    //  console.log(formatTime(new Date('2021-04-13 18:02:06'),true))
  },
  methods: {
    load() {
      // this.isMore = false;
      // this.isflag = true;
      // this.listQuery.page++;
      // this.getList();
      // if (this.isflag) {
      //   if (this.list.length >= this.total_num) {
      //     // this.isflag = false;
      //     // this.isMore = true;
      //   }
      // }
      //this.isflag = false;
      // setTimeout(' this.isflag = false', 1000)
    },
    strListSort(val1,val2){
      val1=val1.sort((val1, b) => { return val1.localeCompare(b) }).toString();
      val2=val2.sort((val2, b) => { return val2.localeCompare(b) }).toString();
      return val1!==val2;
    },
    getCaseDetail(){
       if(this.caseDetail){
        this.caseDetail=JSON.parse(sessionStorage.getItem('rowkey'));
       }
    },
    getList() {
      this.listQuery.case_id = this.caseDetail.id;
      // this.listQuery.case_id=this.$route.query.id;
      this.listQuery.evidence_creater = this.caseDetail.case_creater;
      if (this.statusAll == "全部" || this.statusAll == 0) {
        this.listQuery.evidence_status = null;
      }else if(this.statusAll=="书签"){
        this.handleFiltermark()
        }else{
        this.listQuery.evidence_status=this.statusAll
      }
      fetchEvidence(this.listQuery).then((response) => {
         this.count_fail=response.data.count_fail;
        this.count_success=response.data.count_success;
        this.count_progress=response.data.count_progress;
        this.count_mark=response.data.count_mark
        this.total_num = this.count_fail+this.count_success+this.count_progress;
        if (this.total_num >= 0) {
           for (let i in response.data.list) {
            this.list.push(JSON.parse(JSON.stringify(response.data.list[i])));  
          }
        } else {
          this.list = null;
        }
      })
      // .catch(err=>{
      //   console.log(err);
      //       this.$message.error(err.message);
            
      //     });
    },
    handleCreateEvidence() {},
    handleFilter() { //切换状态刷新
     this.listQuery.page = 1;
      if (this.listQuery.keyword == "") {
        this.listQuery.keyword = null;
      }
      // this.list = [];
      // this.list.length=0;
      this.list.splice(0,this.list.length)
    if (this.list.length == 0) {
        this.getList();
      } else {
        this.handleFilter;
      }
      //this.handleFiltermark()
    },
    handleFiltermark(){
       this.list=[];
       this.listQuery.page = 1;
       if(this.list.length==0){
         this.getFetctMark();
       }else{
         this.handleFiltermark();
       }
      
    },
    getFetctMark(){
      fetchmark(this.caseDetail.id).then((response)=>{
          this.count_mark=response.data.count_mark;
          if (this.count_mark >= 0) {
           for (let i in response.data.list) {
            this.list.push(JSON.parse(JSON.stringify(response.data.list[i])));  
          }
        } else {
          this.list = null;
        }
      })
    },
    sendmark(row){ 
      this.markQuery.evidence_id=row.evidence_id,
      this.markQuery.case_id=row.case_id
       createmark(this.markQuery).then((response) => {
       if(response.code==2000){
         this.list=[]
         this.getList()
       }
      });
    },
deletemark(row){
  delectmark(row.evidence_id).then((response)=>{
    if(response.code==2000){
         this.list=[]
         this.getFetctMark()
       }
  })
},
    changeList(){
        this.list=[];
        this.getList()
    },
    senddetail(row){
      // this.$router.push({name:'Detail',params:{rowkey:row}})
        localStorage.setItem("rowkey",JSON.stringify(row))
    },
    addData() {
      this.addTo = true;
      this.dialogFormVisibleT = true;
      this.modify = {
        title: null,
        url: null,
        case_status: null,
        evidence_status: [],
        evidence_creater: "吴亦凡",
        start_time: null,
        update_time: null,
      };
      this.headers = "新增";
         // this.list = []
      // this.getList()
    },
    editData(row) {
      this.addTo = true;
      this.modify = row;
      this.headers = "修改";
    },
    cancels() {
      this.addTo = false;
    },

  },
};
</script>

<style lang="scss" scoped>
.el-tag{
    font-size: 15px;
  }
.check_group {
  color: #666666;
  width: 300px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 20px;
}
.filter-container {
  height: 47px;
  border-top: 1px solid #e8e8e8;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #ffffff;
  padding: 0 16px;
  .filter-item:hover {
    border-color: #63a6e9;
    box-shadow: 0 0 4px ;
  }
}
.filter-container-top {
  height: 27px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #ffffff;
  padding: 0 16px;
  line-height: 27px;
  .filter-item:hover {
    border-color: #63a6e9;
    box-shadow: 0 0 4px ;
  }
}
.searchBox {
  border-bottom: 1px solid #e8e8e8;
  border-top: 1px solid #e8e8e8;
  padding: 0 16px;
  background-color: #fafafa;
  height: 70px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  ::v-deep .filter-item input {
    padding-right: 10px;
    height: 32px;
  }
}
.el-main {
  //background-color: #f1f1f1;
  display: flex;
  //align-items: center;
  justify-content: center;
}
.el-aside {
  background-color: #ffffff;
  border-top-color: whitesmoke;
  border: 3px;
  width: 170px;
}

.line_creater {
  width: 100%;
  margin-top: 10px;
}
.line_link {
  display: flex;
  width: 100%;
  justify-content: space-between;
   margin: 10px  0 0 0;
}

.imgdata {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
  font-size: 80px;
}
.deleteBorder ::v-deep .el-tabs__nav-wrap::after {
  height: 0px;
  background: #fff;
}
.marktabs{
  margin-left: 40px;
}
.el-link {
  width: 80%;
  height:19px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
  align-items: center;
}
.el-table label{
  color: #999999;
}
.el-table-column{
   padding: 18px;
}
.el-icon-refresh{
  font-size: 20px;
}
input[type="checkbox"] + label{

}
input[type="checkbox"]:checked + label{
  // background-color: rgb(215, 238, 8);
  color: rgb(247, 186, 42);
}
input {
    position: absolute;
    clip: rect(0, 0, 0, 0);
}
.showimg{
  height: 100%;
  widows: 100%;
  span{
   padding: auto;
  }
}
.title_p{
  //position: relative;
  margin: 0;
  font-size: 16px;
  color: #333;
  span {
    font-size: 16px;
    font-family: PingFang SC, Arial, Microsoft YaHei, sans-serif;
  }
}
.bookmark{
  padding: 0px;
}
::v-deep .el-table__body-wrapper.is-scrolling-none::-webkit-scrollbar{
     position: relative;
     background-color: rgba(40, 44, 52, 0.1);
     border: 3px solid transparent;
     border-radius: 7px;
    width: 8px;
    height: 8px;
}

</style>
